<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2021/4/16
  Time: 10:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <meta charset="UTF-8">
    <title>我的点餐</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</head>

<body onload="loadData()">
<br>
<button type="button" class="btn-success" onclick="myCheck()">结账</button>
<table class="table">
    <thead>
    <input type="hidden" id="userid" value="${userId}" >
    <th><input type="checkbox" name="selectId" onclick="quanxuan(this)">全选</th>
    <th>桌子号</th>
    <th>菜名</th>
    <th>份数</th>
    <th>是否上菜</th>
    <th>是否结账</th>
    </thead>

    <tbody id="tb">

    </tbody>
</table>

<script>
    var userid = $("#userid").val();
    function loadData() {
        $.ajax({
            url: "${pageContext.request.contextPath}/table/myMenuAjax",
            type: "get",
            data:{"userId":userid},
            dataType: "json",
            success: function (data) {
                var html = "";
                for (var i = 0; i < data.info.length; i++) {
                    html += "<tr class='success'>" +
                        "<td><input  type=\"checkbox\" name=\"selectId\" value='" + data.info[i].tEId + "'></td>" +
                        "<td>" + data.info[i].tId + "</td>" +
                        "<td>" + data.info[i].eName + "</td>" +
                        "<td>" + data.info[i].tNumber + "</td>" +
                        "<td>" + data.info[i].tEState + "</td>" +
                        "<td>" + data.info[i].tECheck + "</td>" +
                        "</tr>"
                }
                $("#tb").html(html);
            }
        })
    }

    //全选
    function quanxuan(obj) {
        //获取全选的值
        var v = $(obj).prop("checked");
        $("input[name='selectId']").prop("checked", v);
        $("input[name='selectId']").prop("checked", $(obj).prop("checked"));


    }

    function myCheck() {
        var arrid = ""
        /*jquery伪类选择*/
        /* $("input[type='checkbox']:checked") 获取所有选中的复选框*/
        $("input[type='checkbox']:checked").each(function () {
            arrid += $(this).val() + ",";
        })
        var is = confirm("你确定要结账吗");
        if (is) {
            $.ajax({
                url: "${pageContext.request.contextPath}/table/checkAjax",
                type: "get",
                data: {"arrId": arrid},
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    if (data.info == "结账成功") {
                        alert(data.info);
                        //刷新
                        loadData();
                    }

                }
            })
        }
    }

</script>

</body>

</html>